<template>
  <Modal
    v-model:open="visible"
    width="100%"
    wrapClassName="full-modal"
    @cancel="handleClose"
    :footer="null"
    getContainer="body"
  >
    <template #title>
      <LeftOutlined
        :style="{ color: '#fff', cursor: 'pointer', paddingRight: '10px' }"
        @click="handleClose"
      />
      <span>{{ title }}</span>
    </template>
    <template #closeIcon> <CloseOutlined :style="{ color: '#fff' }" /> </template>
    <slot></slot>
  </Modal>
</template>

<script setup lang="ts" name="visualListModal">
  import { computed } from 'vue';
  import { Modal } from 'ant-design-vue';
  import { CloseOutlined, LeftOutlined } from '@ant-design/icons-vue';

  const $props = defineProps({
    modelValue: {
      type: Boolean,
      default: true,
    },
    title: {
      type: String,
      default: '标题',
    },
  });

  const $emits = defineEmits(['update:modelValue']);

  const visible = computed({
    get: () => $props.modelValue,
    set: (val) => $emits('update:modelValue', val),
  });

  const handleClose = () => {
    visible.value = false;
  };
</script>

<style lang="less">
  .full-modal {
    .ant-modal-content {
      display: flex;
      flex-direction: column;
      height: calc(100vh);
      background: #030e20;

      .ant-modal-header {
        background: #030e20;
        border-color: rgba(255, 255, 255, 0.1);

        .ant-modal-title {
          color: #fff;
        }
      }
    }

    .ant-modal {
      max-width: 100%;
      top: 0;
      padding-bottom: 0;
      margin: 0;
    }

    .ant-modal-body {
      flex: 1;
    }
  }
</style>
